<template>
  <div style="border: 1px solid red">
    <h1>父组件</h1>
    <input type="number" v-model="num" />
    <mytest :num="num" />
    <el-button-group>
      <el-button icon="el-icon-minus" @click="decrease"></el-button>
      <el-button icon="el-icon-plus" @click="increase"></el-button>
    </el-button-group>
    <h1>子</h1>
    <myrate :rate="value2" @callfather="fathermethod"></myrate>
    <h1>父组件</h1>
    <el-rate v-model="value2" :colors="colors"> </el-rate>
  </div>
</template>

<script>
// @ is an alias to /src
import mytest from '@/components/mytest.vue';
import myrate from '@/components/myrate.vue';
export default {
  data() {
    return {
      num: 0,
      value2: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
    };
  },
  methods: {
    increase() {
      this.num += 1;
      if (this.num > 100) {
        this.num = 100;
      }
    },
    decrease() {
      this.num -= 1;
      if (this.num < 0) {
        this.num = 0;
      }
    },
    fathermethod(val) {
      this.value2 = val;
    }
  },
  components: {
    mytest,
    myrate
  }
}
</script>
